<template>
	<view class="house_list">
		<view class="house_li_item" v-for="(item,index) in houseInfoList" :key="index" @click="goToHouseDetails(item.id)">
			<image class="li_item_fl" :src="item.image" mode=""></image>
			<view class="li_item_fr">
				<view class="fr_top">
					<view class="fr_top_tag">{{item.type | type}}</view>
					<view class="fr_top_tit"> {{item.title}}</view>
				</view> 
				<view class="fr_label" v-if="type=='buyhouse'"> 
					<text >{{item.community.community_name}}</text>
					<text >{{item.house_type}}</text>
					<text ></text>
				</view>
				<view class="fr_tag"  v-if="type=='buyhouse'">
					<u-tag v-for="tag in item.tag" class="u-tag" :text="tag" type="primary" size="mini" mode="plain" /> 
				</view>
				<view class="fr_label" v-if="type=='renting'">
					<text>{{item.more_option['户型']}}</text>
					<text>{{item.area}}平方米</text>
					<text>{{item.community.community_name}}</text>
				</view>
				<view class="fr_tag"  v-if="type=='renting'">
					<u-tag v-for="tag in item.more_option['出租要求']" class="u-tag" :text="tag" type="primary" size="mini" mode="plain" /> 
				</view>
				<text class="price">{{item.money}} <text v-if="type=='renting'">/月</text> </text>
			</view>
		</view>
		<u-empty :show='houseInfoList.length == 0' mode="list" text="暂无房屋信息"></u-empty> 
	</view>
</template>

<script>
	export default {
		props:{
			houseInfoList:{
				type: Array,
				default: () => []
			},
			type:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			goToHouseDetails(id){     
				if(this.type == 'renting'){
					uni.navigateTo({ 
						
						url: '/neighbor/housedetailslease/index?id=' + id
					})
				}else{
					//买房
					uni.navigateTo({
						url: '/neighbor/housedetailssale/index?id=' + id
					})
				}
			}
		},
		filters:{
			type(type){  
				if(type == 1){
					return '整租'
				}else{
					return '合租'
				}
			}
		}
	}
</script>

<style lang="scss">
	.house_list { 
		padding: 0 30rpx;
		background-color: #fff;
		.house_li_item {
			display: flex;
			justify-content: space-between;
			padding: 38rpx 0;
			height: 300rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.li_item_fl {
				width: 242rpx;
				border-radius: 10rpx;
				background-color: #efefef;
			}

			.li_item_fr {
				width: 413rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				
				.fr_top{
					display: flex;
					justify-content: space-between;
					.fr_top_tag{
						width: 80rpx;
						text-align: center;
						height: 40rpx;
						line-height: 40rpx;
						color: #fff;
						border-radius: 10rpx;
						background-color: #47a450;
					}
					.fr_top_tit{
						width: 310rpx;
						font-weight: 700;
						font-size: 32rpx; 
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}  
				.fr_label {
					display: flex;
					justify-content: space-between;
					height: 64rpx;
					line-height: 64rpx;
				}

				.fr_tag {
					height: 64rpx;

					.u-tag {
						margin-right: 10rpx;
					}
				}

				.price {
					font-size: 38rpx;
					color: #FF6716;
					font-weight: 700;
				}
			}
		}
	}
</style>
